<template>
  <!-- 这是个公共的组件 -->
  <div class="toast" :class="toastType">
    <i class="iconfont" :class="$store.state.toasticon"></i
    ><span>{{ $store.state.toastMsg }}</span>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  computed: {
    toastType() {
      let type = "success";
      switch (this.$store.state.toasticon) {
        case "icon-toast-shibai_huaban":
          type = "dander";
          break;
        case "icon-toast-jinggao":
          type = "warning";
          break;
      }
      console.log(type);
      return type;
    },
  },
};
</script>
 
<style lang = "less" scoped>
.toast {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translate(-50%);
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  .iconfont {
    padding-right: 5px;
  }
  &.success {
    background-color: violet;
  }
  &.dander {
    background-color: wheat;
  }
  &.warning {
    background-color: yellow;
  }
}
</style>